<script setup>
	import { computed, ref, reactive, watchEffect } from 'vue'
</script>

<template>
	<!-- 这个很重要 -->
	<!-- 
		<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
		和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素
		，也不会出现在父组件链中。 
	-->
	<router-view v-slot="{ Component }">
		<keep-alive>
			<component
				v-if="$route.meta.keepAlive"
				:key="$route.name"
				:is="Component"
			/>
		</keep-alive>
		<component
			v-if="!$route.meta.keepAlive"
			:key="$route.name"
			:is="Component"
		/>
	</router-view>
</template>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	#app {
		height: 100vh;
		width: 100vw;
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* 抽屉式动画必备 */
		overflow: hidden;

	}
	/* 新写法 */
	.test {
		background-color: v-bind(textColor);
	}
</style>
